<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>叮叮书店</title>
    <!-- each length  160 ,height  60, top nav bar  -->
    <!--font size 24 height-->
    <!--shooping car height 40-->
    <!--    shang  x ia 10 -->
    <!--    font size  20  height gouwuche -->
    <!--    charachatoer to left 20 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>

    <meta name="keywords" content="书店,叮叮书店,图书"/>

    <meta name="description" content="叮叮书店是一个销售书籍的网上书店."/>

    <meta name="robots" content="index,follow"/>
    <!--    https://www.cnblogs.com/guokaifeng/p/10993470.html-->
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">

    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/cart.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">

    </style>

</head>

<body>
<!--<a id="top"></a>-->
<header>
    <h1>叮叮书店</h1>
</header>
<nav>
    <div id="nav">
        <!--    ul>li*5>a[href="#"]   tab -->
        <!--    内容 {} ,光标在哪里他就在哪里生成-->
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">书籍分类</a>

                <!--            ul>li*3>a[href="#"]-->
                <ul>
                    <li><a href="#">编程语言</a></li>
                    <li><a href="#">数据库</a></li>
                    <li><a href="#">图形图像</a></li>
                </ul>
            </li>
            <li><a href="#">特殊期刊</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
        <div class="cart">
            <a  id="cart-a" href="#">购物车</a>
        </div>
    </div>
</nav>
<div id="content-wrapper">
    <main>

        <div id="adv">
            <ul>
                <li class="lunbo1">
                    <span>1</span>
                    <div></div>
                </li>
                <li class="lunbo2">
                    <span>2</span>
                    <div></div>
                </li>
                <li class="lunbo3">
                    <span>3</span>
                    <div></div>
                </li>
                <li class="lunbo4">
                    <span>4</span>
                    <div></div>
                </li>
            </ul>


            <section id="new">
                <div class="image-box">
                    <img src="images/prod4.jpg" alt="HTML+CSS3从入门到精通">
                </div>

                <div class="image-box">
                    <img src="images/prod5.jpg" alt="响应式Web设计">
                </div>
            </section>

<!--            ; 段;-->

            <section id="sales">
                <div class="text-desc">
                    <img src="images/sale.jpg" alt="">
                </div>

                <div class="text-desc">
                    <img src="images/sale.jpg" alt="">
                </div>
            </section>

            <section id="recommend">
<!--                https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before-->
<!--                CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。
常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。-->
                <span class="icon-book">

                </span>
<!--                <img src="images/">-->
                <h2>本周推荐</h2>
                <section class="recommend-book">
                    <h3>《HTML5权威指南》</h3>
                    <div class="content">
                        <div class="cover">
                            <a href="#"><img src="images/prod2.jpg" alt="HTML5权威指南"></a>
                        </div>
                        <div class="description">
                            <p>作为下一代Web标准，
                                <mark>HTML5</mark>
                                致力于为互联网开发者搭建更加便捷、开放的沟通平台。业界普遍认为，在未来几年内，
                                <mark>HTML5</mark>
                                无疑将成为移动互联网领域的主宰者。本书是系统学习网页设计和移动设计的参考图书。
                            </p>
                            <p>Adam Freeman，曾在多家名企担任高级职务，现为畅销技术图书作家，著有多部C#、.NET和Java方面的大部头作品。其中《ASP.NET
                                4高级程序设计（第4版）》、《精通ASP.NET
                                MVC
                                3框架（第3版）》销量均在同品种中名列前茅，备受读者推崇。Freeman专门为网页开发新手和网页设计师打造的经典参考书，这本书秉承作者的一贯风格，幽默风趣、简约凝练、逻辑性强，是广大Web开发人员的必读经典。</p>
                        </div>
                    </div>
                    <div class="cart-more">
                        <button>加入购物车</button>
                        <button>详细内容</button>
<!--1-->
                    </div>

                </section>


                <section class="recommend-book">
                    <h3>《JavaScript权威指南》</h3>
                    <div class="content">
                        <div class="cover">
                            <a href="#"><img src="images/prod3.jpg" alt="JavaScript权威指南"></a>
                        </div>
                        <div class="description">
                            <p>经典的JavaScript工具书，从1996年以来，本书已经成为JavaScript程序员心中的《圣经》。</p>
                            <p>David Flanagan，是一名程序员，也是一名作家 。他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby
                                Programming Language》、以及《Java in a
                                Nutshell》。David毕业于麻省理工学院，获得计算机科学与工程学位。他和妻子和孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。</p>
                        </div>
                    </div>

                    <div class="cart-more">
                        <button>加入购物车</button>
                        <button>详细内容</button>

                    </div>
<!--1-->
                </section>
            </section>

            <section id="video">
                <h2> 关于我们</h2>
                <p>成立于......</p>
                <div class="video">
                    <video controls="controls" autoplay="autoplay">
                        <source src="images/book-store.mp4" type="video/mp4">
                        <source src="images/book-store.webm" type="video/webm">
                        <source src="images/book-store.ogv" type="video/ogg">
                        <p>not suport</p>
                    </video>
                </div>
            </section>

            <section>
                <section class="title-bar">
                    <p>分享到:</p>
                    <div class="bdsharebuttonbox">
                        <a href="#" class="bds_more" data-cmd="more"></a>
                        <a href="#" class="bds_qzone" data-cmd="qzone"></a>
                        <a href="#" class="bds_tsina" data-cmd="tsina"></a>
                    </div>
                    <script>
                        window._bd_share_config={
                            "common":{
                                "bdSnsKey":{},
                                "bdText":"",
                                // page 286
                            }
                        }
                    </script>
                </section>
            </section>

            <a class="selling" href="#">深度学习 [deep learning]</a>
            <div class="curr"></div><div class="p-img"></div>
            <a class="selling" title="深度学习 [deep learning]" href="#">
                <img src="images/selling1.jpg" alt="封面">
            </a>


            <a class="selling" href="#">Hadoop权威指南：大数据的存储与分析(第4版)</a>
           <div class="curr"></div><div class="p-img"></div>
            <a class="selling" title="Hadoop权威指南：大数据的存储与分析(第4版)" href="#">
                <img src="images/selling2.jpg" alt="封面">
            </a>


            <a class="selling" href="#">和秋叶一起学PPT第3版</a>
            <div class="curr"></div><div class="p-img"></div>
            <a class="selling" title="和秋叶一起学PPT第3版" href="#">
                <img src="images/selling3.jpg" alt="封面">
            </a>

            <a class="selling" href="#">深度学习优化与识别</a>
            <div class="curr"></div><div class="p-img"></div>
            <a class="selling" title="深度学习优化与识别" href="#">
                <img src="images/selling3.jpg" alt="封面">
            </a>

            <a class="selling" href="#">区块链原理、设计与应用</a>
            <div class="curr"></div><div class="p-img"></div>
            <a class="selling" title="区块链原理、设计与应用" href="#">
                <img src="images/selling3.jpg" alt="封面">
            </a>

            <img src="images/about.gif" alt="叮叮书店">

        </div>
    </main>
    <aside>
        <div id="advert">
            <a href="#"><img src="images/ad1.jpg" alt="adv"></a>
            <a href="#"><img src="images/ad2.jpg" alt="adv"></a>
            <a href="#"><img src="images/ad3.jpg" alt="adv"></a>
        </div>
    </aside>
</div>

<footer>

</footer>
</body>

</html>

